var socket;

$(function(){

    function openSocket() {
        if (typeof (WebSocket) == "undefined") {
            console.log(">>>>>>您的浏览器不支持WebSocket");
        } else {
            console.log(">>>>>>您的浏览器支持WebSocket");
            var socketUrl = "http://localhost:8080/websocket/" + $("#roomId").val() + "/" + $("#userId").val();
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            if (socket != null) {
                socket.close();
                socket = null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function () {
                console.log(">>>>>>websocket发起连接，userId: " + $("#userId").val());
            };
            //获得消息事件
            socket.onmessage = function (msg) {
                var json = $.parseJSON(msg.data);
                //todo 发现消息进入    开始处理前端触发逻辑
                msgArea(json);
            };
            //关闭事件
            socket.onclose = function () {
                console.log(">>>>>>websocket断开连接");
            };
            //发生了错误事件
            socket.onerror = function () {
                console.log(">>>>>>websocket发生了错误");
            }
        }
    }

    function msgArea(json) {
        console.log(">>>>>>websocket接收到消息," + json);
        var msgElm = $(".info_box");
        var htmlMsg = '';
        var ico = "/img/icon/man.ico";
        var rOrL = "l";

        if (json.data.type === "open") {
            console.log(">>>>>>websocket已连接");
            htmlMsg = "<div class='info_m'><span class='msg_m'>"+ json.data.data.content +"</span></div>";
        } else if (json.data.type === "close") {
            console.log(">>>>>>websocket已断开连接");
            htmlMsg = "<div class='info_m'><span class='msg_m'>"+ json.data.data.content +"</span></div>";
        } else if (json.data.type === "send") {
            debugger
            console.log(">>>>>>websocket已消费消息");
            if (json.data.data.fromUserId === $("#userId").val()) {
                rOrL = "r";
            }
            htmlMsg = '<div class="info_'+ rOrL +'">';
            //头像
            if (json.data.data.imgUrl === "") {
                if (json.data.data.gender === "0") {
                    ico = "/img/icon/wumen.ico";
                }
                htmlMsg = htmlMsg + "<img src="+ ico +" class='pic_"+ rOrL +"'>";
            } else {
                htmlMsg = htmlMsg + "<img src="+ json.data.data.imgUrl +" class='pic_"+ rOrL +"'>";
            }
            //消息内容
            if (json.data.data.fromUserId === $("#userId").val()) {
                htmlMsg = htmlMsg + "<span class='msg_"+ rOrL +"'>"+ json.data.data.userName + ":<br/>" + json.data.data.content +"</span></div>";
            } else {
                htmlMsg = htmlMsg + "<span class='msg_"+ rOrL +"'>"+ json.data.data.userName + ":<br/>" + json.data.data.content +"</span></div>";
            }
        } else {
            console.log(">>>>>>websocket未知消息类型");
            htmlMsg = "<div class='info_m'><span class='msg_m'>未知消息类型</span></div>";
        }

        msgElm.append(htmlMsg);
    }

    openSocket();

});

function sendMessage() {
    var contentText = $("#contentText").val();
    if (contentText === "") {
        alert("发送信息不能为空！");
    }
    if (typeof (WebSocket) === "undefined") {
        console.log(">>>>>>您的浏览器不支持WebSocket");
    } else {
        socket.send('{"toUserId":"' + $("#toUserId").val() + '"'
            + ',"type":"send"'
            + ',"content":"' + contentText + '"}');
        $("#contentText").val("");
    }
}